[FEAT] 에러/로딩/온보딩 상태 페이지 Lottie 애니메이션 적용#131
Conversation
- 상태 페이지 애니메이션 렌더링을 위해 lottie-react 패키지를 추가했습니다
- 공통 LottiePlayer, StatusScreen 컴포넌트를 추가했습니다 - global-error, 500, 404 페이지에 상태별 Lottie 애니메이션과 안내 문구를 적용했습니다 - loading 페이지를 로띠 애니메이션만 중앙에 노출하도록 구성했습니다 - 404 응답을 유도하기 위한 [...rest] catch-all 라우트를 추가했습니다 - 500/404/전역 에러 문구가 각각 올바른 번역 네임스페이스를 참조하도록 수정했습니다
- 온보딩 페이지에 LottiePlayer로 온보딩 애니메이션을 노출했습니다
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
⏰ Timo-web
|
Warning Review limit reached
Next review available in: 55 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
Walkthrough전역 에러, 500 에러, 404, 로딩, 온보딩, 캐치올 라우트에 공통 Changes상태 페이지 Lottie 적용
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant 방문자
participant ErrorPage
participant Sentry
participant StatusScreen
participant LottiePlayer
방문자->>ErrorPage: 라우트 에러 발생
ErrorPage->>Sentry: captureException(error)
ErrorPage->>StatusScreen: 번역 문구와 Lottie 경로 전달
StatusScreen->>LottiePlayer: lottieSrc와 ariaLabel 전달
LottiePlayer->>LottiePlayer: fetch(src)로 JSON 로드
LottiePlayer-->>StatusScreen: animationData 렌더링
StatusScreen-->>방문자: 상태 화면과 홈 액션 표시
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Timo Performance ReportBundle Size — timo-web
Lighthouse — timo-web
Image Optimization — timo-web
측정 커밋: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/timo-web/app/`[locale]/loading.tsx:
- Around line 5-7: `LottiePlayer` is rendered without an accessible name, so
update the loading UI in the `loading.tsx` component to pass a meaningful
`ariaLabel` alongside the existing `src` and `className` props. Use the
`LottiePlayer` usage in this screen to ensure it still renders as `role="img"`
but now has a screen-reader-friendly label that describes the loading state.
In `@apps/timo-web/app/`[locale]/onboarding/page.tsx:
- Around line 5-9: The onboarding page animation in the LottiePlayer usage is
hard-coded for desktop and overflows on small screens, and it also lacks an
accessibility decision. Update the LottiePlayer configuration to use responsive
positioning/sizing in the onboarding page component (for example by adjusting
the current absolute placement across breakpoints or making the desktop-only
intent explicit), and add an appropriate ariaLabel if the animation conveys
meaning or hide it from assistive tech if it is decorative.
In `@apps/timo-web/app/global-error.tsx`:
- Around line 50-58: 중복된 상태 화면 액션 버튼(Link) 구현을 공통 컴포넌트로 추출하세요. global-error.tsx의
action, error.tsx의 action, not-found.tsx의 버튼이 동일한 스타일과 거의 같은 구조를 반복하므로,
StatusActionButton 같은 재사용 컴포넌트를 만들어 href와 label만 받도록 정리하고 세 파일에서 이를 사용하세요. 또한
global-error.tsx와 error.tsx의 wrapping div와 not-found.tsx의 단일 Link 구조 차이를 함께 정리해,
각 화면의 action 렌더링 형태가 일관되게 맞도록 수정하세요.
In `@apps/timo-web/components/lottie/LottiePlayer.tsx`:
- Around line 22-33: In LottiePlayer’s fetch effect, the current response
handling passes every resolved fetch directly to response.json(), which allows
404/500 responses to be treated as valid animation data. Update the useEffect
flow to check response.ok before parsing, and throw an error when it is false so
the failure is routed into the existing catch path. Keep the fix localized to
the fetch chain in LottiePlayer so only valid animation JSON reaches
setAnimationData.
In `@apps/timo-web/messages/ko.json`:
- Around line 44-57: Fix the Korean localization text in ko.json by correcting
the typos in Error.description (“잠시후” to “잠시 후” and “주새요” to “주세요”) and making
punctuation consistent by adding a period to NotFound.description; update the
affected entries in the Error and NotFound message objects so the wording and
sentence endings match the rest of the translations.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 802cb16c-4a85-4edd-b90e-0e30c119f8d0
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (16)
apps/timo-web/app/[locale]/[...rest]/page.tsxapps/timo-web/app/[locale]/error.tsxapps/timo-web/app/[locale]/loading.tsxapps/timo-web/app/[locale]/not-found.tsxapps/timo-web/app/[locale]/onboarding/page.tsxapps/timo-web/app/global-error.tsxapps/timo-web/components/lottie/LottiePlayer.tsxapps/timo-web/components/status-screen/StatusScreen.tsxapps/timo-web/messages/en.jsonapps/timo-web/messages/ko.jsonapps/timo-web/package.jsonapps/timo-web/public/lottie/404.jsonapps/timo-web/public/lottie/500.jsonapps/timo-web/public/lottie/error.jsonapps/timo-web/public/lottie/loading.jsonapps/timo-web/public/lottie/onboarding.json
| <div className="relative h-screen w-full"> | ||
| <LottiePlayer | ||
| src="/lottie/onboarding.json" | ||
| className="absolute top-1/2 left-[197px] w-[500px] -translate-y-1/2" | ||
| /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 온보딩 페이지가 데스크톱 전용인지, 반응형 대응이 필요한지 확인합니다.
# 1. 미디어 쿼리나 반응형 클래스 사용 여부 검색
rg -n 'md:|lg:|sm:|xl:' apps/timo-web/app/[locale]/onboarding/
# 2. 다른 페이지의 반응형 패턴 확인
rg -n 'left-\[|w-\[500' apps/timo-web/app/ --type=ts
# 3. Viewport meta 태그 또는 반응형 설정 확인
rg -n 'viewport|max-width|min-width' apps/timo-web/app/[locale]/layout.tsxRepository: Team-Timo/Timo-client
Length of output: 285
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- onboarding page ---'
sed -n '1,200p' apps/timo-web/app/[locale]/onboarding/page.tsx | cat -n
echo
echo '--- find LottiePlayer definition/usages ---'
fd -a 'LottiePlayer' apps/timo-web components | sed -n '1,120p' || true
rg -n "export .*LottiePlayer|function LottiePlayer|const LottiePlayer|ariaLabel|aria-label" apps/timo-web components -g '!**/node_modules/**' | sed -n '1,200p' || true
echo
echo '--- list lottie component files ---'
fd -a '' components/lottie apps/timo-web/components/lottie 2>/dev/null | sed -n '1,200p' || trueRepository: Team-Timo/Timo-client
Length of output: 1763
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- onboarding-related files ---'
fd -a 'onboarding' apps/timo-web | sed -n '1,200p'
echo
echo '--- onboarding page references ---'
rg -n "onboarding" apps/timo-web -g '!**/node_modules/**' | sed -n '1,200p'
echo
echo '--- LottiePlayer definition ---'
sed -n '1,220p' apps/timo-web/components/lottie/LottiePlayer.tsx | cat -n
echo
echo '--- relevant layout/page sizing hints ---'
sed -n '1,220p' apps/timo-web/app/[locale]/layout.tsx | cat -nRepository: Team-Timo/Timo-client
Length of output: 3587
온보딩 애니메이션에 반응형/접근성 레일을 깔아주세요
레이아웃 뼈대는 깔끔합니다. 다만 left-[197px] + w-[500px] 조합은 375px 폭에서 오른쪽으로 크게 넘쳐 보입니다. sm/md에서 위치·크기를 조정하거나, 정말 데스크톱 전용이면 의도를 코드에 드러내 주세요.
또한 LottiePlayer는 ariaLabel을 지원하므로, 의미 있는 안내라면 라벨을 넣고 장식용이라면 숨김 처리하는 쪽이 맞습니다.
참고: MDN ARIA, Next.js Accessibility
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/timo-web/app/`[locale]/onboarding/page.tsx around lines 5 - 9, The
onboarding page animation in the LottiePlayer usage is hard-coded for desktop
and overflows on small screens, and it also lacks an accessibility decision.
Update the LottiePlayer configuration to use responsive positioning/sizing in
the onboarding page component (for example by adjusting the current absolute
placement across breakpoints or making the desktop-only intent explicit), and
add an appropriate ariaLabel if the animation conveys meaning or hide it from
assistive tech if it is decorative.
| action={ | ||
| <div className="flex items-center gap-3"> | ||
| <Link | ||
| href="/" | ||
| className="typo-headline-m-16 rounded-[8px] border border-gray-500 px-4 py-2.5 text-gray-900" | ||
| > | ||
| {t("homeButton")} | ||
| </Link> | ||
| </div> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
액션 버튼 코드 중복 — 공통 컴포넌트 추출을 제안합니다.
global-error.tsx, error.tsx(26-34행), not-found.tsx(14-21행) 세 파일에서 동일한 Link 버튼(typo-headline-m-16 rounded-[8px] border border-gray-500 px-4 py-2.5 text-gray-900)이 반복됩니다. not-found.tsx는 wrapping <div> 없이 Link만 전달하고, 나머지 두 파일은 <div className="flex items-center gap-3">으로 감싸고 있어 구조 불일치도 있습니다.
공통 StatusActionButton 컴포넌트를 추출하면 중복 제거와 일관성 확보를 동시에 잡을 수 있습니다.
♻️ 공통 StatusActionButton 컴포넌트 추출 제안
// components/status-screen/StatusActionButton.tsx
import { Link } from "`@/i18n/navigation`";
interface StatusActionButtonProps {
label: string;
href?: string;
}
export const StatusActionButton = ({
label,
href = "/",
}: StatusActionButtonProps) => (
<Link
href={href}
className="typo-headline-m-16 rounded-[8px] border border-gray-500 px-4 py-2.5 text-gray-900"
>
{label}
</Link>
);각 파일에서의 사용:
- action={
- <div className="flex items-center gap-3">
- <Link
- href="/"
- className="typo-headline-m-16 rounded-[8px] border border-gray-500 px-4 py-2.5 text-gray-900"
- >
- {t("homeButton")}
- </Link>
- </div>
- }
+ action={<StatusActionButton label={t("homeButton")} />}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/timo-web/app/global-error.tsx` around lines 50 - 58, 중복된 상태 화면 액션
버튼(Link) 구현을 공통 컴포넌트로 추출하세요. global-error.tsx의 action, error.tsx의 action,
not-found.tsx의 버튼이 동일한 스타일과 거의 같은 구조를 반복하므로, StatusActionButton 같은 재사용 컴포넌트를 만들어
href와 label만 받도록 정리하고 세 파일에서 이를 사용하세요. 또한 global-error.tsx와 error.tsx의 wrapping
div와 not-found.tsx의 단일 Link 구조 차이를 함께 정리해, 각 화면의 action 렌더링 형태가 일관되게 맞도록 수정하세요.
kimminna
changed the title
ehye1
left a comment
ehye1
left a comment
There was a problem hiding this comment.
로띠 파일 어떻게 넣는지 궁금했는데 pr설명이랑 코드 보고 배워갑니다💥
수고하셨습니다!!!💨🫡
| useEffect(() => { | ||
| const controller = new AbortController(); | ||
|
|
||
| fetch(src, { signal: controller.signal }) |
There was a problem hiding this comment.
lottie json 파일을 어떻게 가져오나 궁금했는데 fetch로 가져오게 되면 필요할 때만 가져올 수 있어서 번들 크기를 줄일 수 있겠네요!
| .then((response) => response.json()) | ||
| .then(setAnimationData) | ||
| .catch(() => { | ||
| // 애니메이션 로드 실패 시 컨테이너만 비운 상태로 유지 (레이아웃 시프트 방지) |
There was a problem hiding this comment.
lottie 파일이 렌더링 되기 전까지 CLS가 발생하는 것 같은데 나중에 높이 고정해놓거나 placeholder 설정해두면 좋을 것 같아요!
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
이제 500,404에러도 이쁘겠네요~
간단한 코멘트라 어푸 먼저 해드릴게요-! 코멘트 내용 확인해주세요!
| }, | ||
| "Error": { | ||
| "title": "잠시 문제가 발생했어요.", | ||
| "description": "더 나은 경험을 위해 잠시 점검 중입니다. 잠시후 다시 이용해 주새요.", |
| export default function Loading() { | ||
| return ( | ||
| <div className="flex min-h-screen w-full items-center justify-center"> | ||
| <LottiePlayer src="/lottie/loading.json" className="w-[143px]" /> |
| fetch(src, { signal: controller.signal }) | ||
| .then((response) => response.json()) | ||
| .then(setAnimationData) | ||
| .catch(() => { | ||
| // 애니메이션 로드 실패 시 컨테이너만 비운 상태로 유지 (레이아웃 시프트 방지) |
There was a problem hiding this comment.
| fetch(src, { signal: controller.signal }) | |
| .then((response) => response.json()) | |
| .then(setAnimationData) | |
| .catch(() => { | |
| // 애니메이션 로드 실패 시 컨테이너만 비운 상태로 유지 (레이아웃 시프트 방지) | |
| fetch(src, { signal: controller.signal }) | |
| .then((response) => { | |
| if (!response.ok) throw new Error(`Failed to load: ${response.status}`); | |
| return response.json(); | |
| }) | |
| .then(setAnimationData) | |
| .catch(() => { | |
| // 애니메이션 로드 실패 시 컨테이너만 비운 상태로 유지 (레이아웃 시프트 방지) | |
| }); |
fetch는 404/500에서도 성공으로 resolve되기 때문에, response.ok 체크 없이 바로 .json()을 호출하면 에러 페이지의 HTML이 animationData로 들어가서 Lottie가 깨질 수 있을 것 같아요!
response.ok가 false일 때 에러를 throw하면 기존 .catch(() => {}) 블록으로 떨어져서 animationData가 null인 상태로 유지되고, Lottie 컴포넌트가 렌더링되지 않아요. 기존 catch 로직을 재활용하면서 최소한의 변경으로 방어할 수 있을 것 같아요!
민아님은 어떻게 생각하시나요?
There was a problem hiding this comment.
response.ok가 false면 에러를 던져서 기존 .catch(() => {})가 그대로 잡아주고, animationData는 null로 유지되어 Lottie가 렌더링되지 않는 안전한 상태를 유지하게 변경하겠습니다!
- response.ok가 false일 때 에러를 throw해 에러 페이지 HTML이 animationData로 들어가지 않도록 했습니다
- 스크린 리더 사용자를 위해 로딩 Lottie에 ariaLabel을 추가했습니다
- "주새요"를 "주세요"로 수정했습니다
…to feat/web/130-status-screen-lottie
There was a problem hiding this comment.
♻️ Duplicate comments (2)
apps/timo-web/messages/ko.json (2)
46-46: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win"잠시후" 띄어쓰기가 아직 수정되지 않았습니다.
이전 리뷰에서 "잠시 후"로 수정을 제안했고 "Addressed"로 표시되었으나, 현재 코드에는 여전히 "잠시후"로 되어 있습니다. "잠시 후"는 올바른 띄어쓰기 표준입니다.
참고: 국립국어원 띄어쓰기 안내
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/timo-web/messages/ko.json` at line 46, 한국어 메시지의 description 문자열에서 잘못 붙여 쓴 “잠시후”를 표준 띄어쓰기인 “잠시 후”로 수정하세요.
51-51: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winNotFound.description에 마침표가 여전히 누락되어 있습니다.
이전 리뷰에서 마침표 추가를 제안했고 "Addressed"로 표시되었으나, 현재 코드에는 마침표가 없습니다. Error.description(Line 46)과 GlobalError.description(Line 56) 모두 마침표로 끝나므로 일관성을 위해 수정이 필요합니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/timo-web/messages/ko.json` at line 51, apps/timo-web/messages/ko.json의 NotFound.description 문장 끝에 마침표를 추가해 Error.description 및 GlobalError.description과 일관되게 수정하세요.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Duplicate comments:
In `@apps/timo-web/messages/ko.json`:
- Line 46: 한국어 메시지의 description 문자열에서 잘못 붙여 쓴 “잠시후”를 표준 띄어쓰기인 “잠시 후”로 수정하세요.
- Line 51: apps/timo-web/messages/ko.json의 NotFound.description 문장 끝에 마침표를 추가해
Error.description 및 GlobalError.description과 일관되게 수정하세요.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: d506db1b-3621-4dac-a274-ee526cf23dd1
📒 Files selected for processing (3)
apps/timo-web/app/[locale]/loading.tsxapps/timo-web/components/lottie/LottiePlayer.tsxapps/timo-web/messages/ko.json
3 participants
ISSUE 🔗
close #130
What is this PR? 🔍
전역 에러(500), 404, 로딩, 온보딩 화면에 공통
StatusScreen/LottiePlayer컴포넌트를 도입해 Lottie 애니메이션 기반 상태 화면으로 정비했습니다.배경
global-error.tsx만 최소한으로 존재했고, 404·500 전용 페이지와 로딩 화면은 없었으며 상태별 안내 문구도 별도로 관리되지 않았습니다.StatusScreen)와 Lottie 렌더러(LottiePlayer)를 만들고, 각 상태(500/404/전역 에러/로딩/온보딩)마다 해당 Lottie 애니메이션과 i18n 문구를 매핑했습니다.LottiePlayer / StatusScreen 공통 컴포넌트
lottie-react기반LottiePlayer와, 타이틀·설명·액션 버튼을 배치하는StatusScreen을 새로 추가했습니다.LottiePlayer는src로 받은 경로를fetch해 JSON 애니메이션 데이터를 상태로 들고 있다가 로드되면Lottie컴포넌트를 렌더링합니다. 로드 실패 시에는 컨테이너만 비워 두어 레이아웃 시프트를 방지합니다.StatusScreen은lottieSrc/title/description/action을 props로 받아 중앙 정렬 레이아웃을 구성합니다.상태 페이지 (500 / 404 / 전역 에러 / 로딩)
[locale]/error.tsx(500),[locale]/not-found.tsx(404),global-error.tsx(전역 크래시),[locale]/loading.tsx를 새로 추가/정비하고, 404 유도를 위한[locale]/[...rest]catch-all 라우트를 추가했습니다.StatusScreen에 상태별lottieSrc(/lottie/500.json,404.json,error.json)와 홈으로 이동하는action을 전달합니다.loading.tsx는 텍스트 없이LottiePlayer만 화면 중앙에 배치했습니다.global-error.tsx는<html>/<body>를 직접 렌더링해야 하는 Next.js 제약 때문에NextIntlClientProvider로 메시지를 직접 주입하고, 최초 렌더 시 URL 세그먼트에서 locale을 추출해 폰트·언어를 맞췄습니다. 또한 500/404/전역 에러 화면이 각각 별도로 정의된Error/NotFound/GlobalError번역 네임스페이스 대신 전부Error를 참조하고 있던 것을 발견해, 상태별로 올바른 네임스페이스를 참조하도록 수정했습니다.global-error.tsx는 클라이언트 컴포넌트로 유지되며Sentry.captureException으로 에러를 보고합니다.온보딩 페이지
LottiePlayer로 온보딩 애니메이션(/lottie/onboarding.json)을 노출했습니다.top-1/2 left-[197px])로 애니메이션을 배치했습니다.To Reviewers
global-error.tsx는 Next.js 특성상<html>/<body>를 직접 감싸고 locale을 클라이언트에서 뒤늦게 결정하는 구조라 최초 렌더에는 기본 locale(routing.defaultLocale)로 잠깐 보였다가 바뀝니다. 이 전제가 맞는지 확인 부탁드립니다.Screenshot 📷
Test Checklist ✔
pnpm check-types통과pnpm lint통과